<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
    <tab-control :titles="['流行','新款','精选']"
                  @tabClick="tabClick"
                  ref="tabControl1" class="tab-control" v-show="isTabFixed"/>
    <scroll class="content" ref="scroll" 
            :probe-type="3"
            :pull-up-load="true"
            @scroll="contentScroll"
            @pullingUp="loadMore">
      <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"/>
      <recommend-view :recommends='recommends' />
      <feature-view />
      <tab-control :titles="['流行','新款','精选']"
                  @tabClick="tabClick"
                  ref="tabControl2" />
      <goods-list :goods="showGoods" />
    </scroll>

    <back-top @click.native="backClick" v-show="isShowBackTop"/>
  </div>
</template>

<script>
  import HomeSwiper from './childComps/HomeSwiper'
  import RecommendView from './childComps/RecommendView'
  import FeatureView from './childComps/FeatureView'

  import NavBar from 'components/common/navbar/NavBar'
  import TabControl from 'components/content/tabControl/TabControl'//控制栏
  import GoodsList from 'components/content/goods/GoodsList'//商品列表
  import Scroll from 'components/common/scroll/Scroll'//滚动
  // import BackTop from 'components/content/backTop/BackTop'//返回顶部按钮

  import {getHomeMultidata,getHomeGoods} from 'network/home'
  import {debounce} from 'common/utils'//防抖动
  import {itemListenerMixin,backTopMixin} from 'common/mixin'//封装的方法2  混入 导入

  import BetterScroll from 'better-scroll'
 

  export default {
    name: "Home",
    components: {
      NavBar,
      HomeSwiper,
      RecommendView,
      FeatureView,
      TabControl,
      GoodsList,
      Scroll,
      // BackTop
    },
    mixins:[itemListenerMixin,backTopMixin],
    data(){
      return {
        banners:[],//保存数据
        recommends:[],//保存数据
        // result:null
        goods:{
          'pop':{page:0,list:[]},
          'new':{page:0,list:[]},
          'sell':{page:0,list:[]},
        },
        currentType:'pop',
        // isShowBackTop:false,//回到顶部按钮
        tabOffsetTop:0, //记录tabControl高度
        isTabFixed:false, //设置fixed样式定位
        saveY:0, //记录位置
        // itemImgListener:null //方法2
      }
    },
    activated(){
      //进来时，将位置设置为原来保存的位置saveY
      this.$refs.scroll.scrollTo(0,this.saveY,0)
      //重新刷新一遍
      this.$refs.scroll.refresh()
    },
    deactivated(){
      //1.保存Y值,离开时，保存一个位置信息saveY
      this.saveY = this.$refs.scroll.getScrollY()
      // console.log(this.saveY)

      //方法2
      //2.取消全局事件的监听
      this.$bus.$off('itemImgLoad',this.itemImgListener)
    },
    created(){
      //1.请求多个数据
      this.getHomeMultidata()

      //2.请求商品数据
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')

    },
    mounted(){
      //1.将refresh传入debounce函数中，生成一个新的函数，防抖动
      // const refresh = debounce(this.$refs.scroll.refresh,200)
      //监听item中图片加载完成
      //方法1：
      // this.$bus.$on('homeItemImageLoad',() => {
      //   refresh()
      //   // console.log('------')
      // })

      //方法2：
      // const refresh = debounce(this.$refs.scroll.refresh,200)
      // this.itemImgListener = () => {
      //   refresh()
      // }
      // this.$bus.$on('itemImgLoad',this.itemImgListener)
    },
    computed:{
      showGoods(){
        return  this.goods[this.currentType].list
      }
    },
    methods:{
      // debounce(func,delay){
      //   let timer = null
      //   return function(...args){
      //     if(timer)clearTimeout(timer)
      //     timer = setTimeout(() => {
      //       func.apply(this,args)
      //     },delay)
      //   }
      // },
      //事件监听的相关方法
      tabClick(index){
        // console.log(index)
        switch(index){
          case 0:
            this.currentType = 'pop'
            break
          case 1:
            this.currentType = 'new'
            break
          case 2:
            this.currentType = 'sell'
            break
        }
        // 让两个tabControl的currentIndex保持一致
        this.$refs.tabControl1.currentIndex = index;
        this.$refs.tabControl2.currentIndex = index;
      },

      // backClick(){
      //   // console.log('回到顶部')
      //   this.$refs.scroll.scrollTo(0,0,500)
      // },

      contentScroll(position){
        //.1判断backTop是否显示
        // console.log(position)
        this.isShowBackTop = (-position.y) > 1000
        //2.决定tabControl是否吸顶(position:fixed)
        this.isTabFixed = (-position.y) > this.tabOffsetTop
      },
      //下拉加载更多
      loadMore(){
        // console.log('加载更多')
        this.getHomeGoods(this.currentType)
      },
      //获取tabControl的offsetTop
      //所有的组件都有一个属性$el:用于获取组件中的元素
      swiperImageLoad(){
        // console.log(this.$refs.tabControl.$el.offsetTop);
        this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
      },
      // 网络请求的相关方法
      getHomeMultidata(){
        getHomeMultidata().then(res => {
        // this.result = res;
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
        })
      },
      getHomeGoods(type){
        const page = this.goods[type].page + 1//页面加1
        getHomeGoods(type,page).then(res => {
          // res => page前30条数据，page：1
          this.goods[type].list.push(...res.data.list)//保存数据
          this.goods[type].page += 1//再次刷新，数据加载页面 + 1

          //完成上拉加载更多
          this.$refs.scroll.finishPullUp()
        })
      },
    }
  }
</script>

<style scoped>
  #home {
    /* padding-top: 44px; */
    height: 100vh;
    position: relative;
  }

  .home-nav {
    background-color: var(--color-tint);
    color: #fff;

    /* 在使用浏览器原生滚动时，为了让导航不跟随一起滚动 */
    /* position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9; */
  }

  .content {
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
    overflow: hidden;
  }

  .tab-control {
    position: relative;
    z-index: 9;
  }
  /* .content {
    height: calc(100% - 93px);
    overflow: hidden;
    margin-top: 44px;
  } */
</style>
